<template>
    <!-- 使用 ref 属性获取外层盒子的 DOM 元素 -->
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
    props: {
        inData: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            myChart: null, // 保存 echarts 实例
        };
    },
    computed: {
        total() {
            return this.inData.reduce((sum, item) => sum + item.value, 0);
        },
    },
    mounted() {
        // 在 mounted 钩子函数中初始化图表，并添加 resize 事件监听器
        this.initChart();
        window.addEventListener("resize", this.handleResize);
        this.myChart.on("mouseover", this.handlePieSectorMouseover);
    },
    beforeDestroy() {
        // 在组件销毁前，移除 resize 事件监听器
        window.removeEventListener("resize", this.handleResize);
    },
    methods: {
        initChart() {
            // 获取外层盒子的 DOM 元素
            const chartContainer = this.$refs.chartContainer;
            // 初始化 echarts 实例
            this.myChart = echarts.init(chartContainer);

            // 配置图表
            let Option = {
                // 图例
                legend: {
                    top: "75%", // 设置图例距离底部的距离为 5%
                    padding: [0, 50], // 设置图例的左右内边距为 50px
                    icon: "circle",
                    left: "center",
                    textStyle: {
                        // 设置图例文本样式
                        fontSize: 12,
                    },
                },
                // 饼图中间文本
                graphic: {
                    elements: [
                        {
                            type: "rect",
                            left: "center",
                            top: "center",
                            shape: {
                                width: "25%", // 设置矩形的宽度为整个容器的 25%
                                height: "30%", // 设置矩形的高度为整个容器的 30%
                            },
                            style: {
                                fill: "#fff",
                            },
                        },
                        {
                            type: "text",
                            left: "center",
                            top: "40%",
                            style: {
                                text: "总数",
                                fontSize: 16,
                            },
                        },
                        {
                            type: "text",
                            left: "center",
                            top: "48%",
                            style: {
                                text: this.total,
                                fontSize: 12,
                            },
                        },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["40%", "55%"], // 设置饼图半径范围为 40% 到 55%
                        center: ["50%", "45%"],
                        // emphasis: {
                        //     focus: "self", // 在扇形区域放大时触发
                        // },
                        itemStyle: {
                            borderRadius: 2,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "outside",
                            formatter: function (params) {
                                return params.value;
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                            position: "center",
                        },
                        data: this.inData,
                    },
                    {
                        type: "pie",
                        radius: ["35%", "41%"], // 设置饼图半径范围为 40% 到 55%
                        center: ["50%", "45%"],
                        z: 9999,
                    },
                ],
                // 设置响应式配置项
                responsive: {
                    // 当容器宽度小于等于 768px 时，legend 文本大小为 12px，饼图大小为 70%
                    768: {
                        legend: {
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        series: [
                            {
                                radius: ["35%", "70%"],
                            },
                        ],
                    },
                    // 当容器宽度大于 768px 时，legend 文本大小为 14px，饼图大小为 60%
                    9999: {
                        legend: {
                            textStyle: {
                                fontSize: 14,
                            },
                        },
                        series: [
                            {
                                radius: ["30%", "60%"],
                            },
                        ],
                    },
                },
            };
            // 保存 echarts 实例
            this.myChart.setOption(Option);
        },
        handleResize() {
            // 调用 echarts 实例的 resize 方法
            this.myChart.resize();
        },
        handlePieSectorMouseover(params) {
            // 在这里处理扇形区域放大时触发的自定义事件
            console.log("扇形区域被点击", params);
            console.log("扇形区域被点击", params.color);
            const emphasis = {
                itemStyle: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: params.color, // 修改阴影颜色为淡灰色
                    shadowOpacity: 0.5,
                },
            };

            // 更新饼图的样式
            this.myChart.setOption({
                series: [
                    {
                        type: "pie",
                        emphasis: emphasis,
                    },
                ],
            });
        },
    },
};
</script>

<style scoped>
.chart-container {
    width: 100%;
    /* // 设置宽度为 100% */
    height: 400px;
    border: 1px solid;
    background-color: aliceblue;
}
</style>
